﻿<style type="text/css">
    .auto-style1 {
        width: 400px;
    }

    .easyui-textbox {
        width: 430px;
    }

    .auto-style2 {
        width: 150px;
    }

    .easyui-combobox {
        width: 430px;
    }
</style>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>用户管理</title>
    <link href="~/css/css_1.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../easyUI/themes/icon.css">
    <script type="text/javascript" src="../../easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="../../easyUI/jquery.easyui.min.js"></script>
    <script>
        $(function () {
            jiazai();
            Role();
            Department();
        })

        function jiazai()
        {
            $.ajax({
                url: "http://localhost:25744/api/User",
                type: "get",
                dataType: "json",
                success: function (data1) {
                    var msg = eval(data1);
                    $('#bumen').datagrid('loadData', msg);
                }
            })
        }

        function Role()
        {
            $.ajax({
                url: "http://localhost:25744/api/Roles",
                dataType: "json",
                type: "get",
                success: function (obj) {
                    var data = eval(obj);
                    $("#rol").combobox({
                        data: data,
                        valueField: 'roles_Id',
                        textField: 'roles_Name'
                    })
                }
            })
        }

        function Department() {
            $.ajax({
                url: "http://localhost:25744/api/Department",
                dataType: "json",
                type: "get",
                success: function (obj) {
                    var data = eval(obj);
                    $("#Dep").combobox({
                        data: data,
                        valueField: 'department_Id',
                        textField: 'department_Name'
                    })
                }
            })
        }

        $(".combo").click(function () {
            if ($(this).prev().combobox("panel").is(":visible")) {
                $(this).prev().combobox("hidePanel");
            } else {
                $(this).prev().combobox("showPanel");
            }
        })


        function formatOper(val, row, index) {
            var s = "<a href='#' onclick='editUser(" + row.Users_Id + ",\"" + row.Users_Name + "\",\"" + row.Users_Account + "\",\"" + row.Users_Pwd + "\",\"" + row.Users_TEL + "\",\"" + row.Roles_id + "\",\"" + row.Department_Id + "\")'>修改</a> <a href='#' onclick='delUser(" + row.Users_Id + ")'>删除</a>";
            return s;
        }
        function editUser(q, w, e,r,t,y,u) {
            $('#w').window('open');
            $("#Users_Id").textbox("setValue", q);
            $("#Users_Name").textbox("setValue", w);
            $("#Users_Account").textbox("setValue", e);
            $("#Users_Pwd").textbox("setValue", r);
            $("#Users_TEL").textbox("setValue", t);
           

            $("#Department_Id").combobox("select", u);
            $("#tian").hide();
            $("#xiu").show();
        }

        function tian() {
            $("#tian").show();
            $("#xiu").hide();
            $('#w').window('open');
           
        }

        function delUser(id) {
            if (confirm('确定删除吗')) {
                $.ajax({
                    url: "http://localhost:25744/apis/User/Delete?id=" + id,
                    type: "Delete",
                    success: function (obj) {
                        if (obj > 0) {
                            alert('删除成功');
                            jiazai();
                        }
                        else {
                            alert("删除失败");
                        }
                    }
                })
            }
        }





    </script>
</head>
<body class="bb1">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="tian()">添加用户</a>
    <input class="easyui-textbox" type="text" name="loan_IdCard" id="loan_IdCard" data-options="required:true">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">查询</a><br />
    <table class="easyui-datagrid" title="用户管理" data-options="singleSelect:true,collapsible:true" style="width:80%;height:70%" id="bumen">
        <thead>
            <tr>
                <th data-options="field:'Users_Id',width:100,align:'center'">编号</th>
                <th data-options="field:'Users_Name',width:180,align:'center'">员工名称</th>
                <th data-options="field:'Users_Account',width:180,align:'center'">员工账号</th>
                <th data-options="field:'Users_TEL',width:180,align:'center'">联系电话</th>
                <th data-options="field:'Users_CreateTime',width:180,align:'center'">加入时间</th>
                <th data-options="field:'Users_IsState',width:100,align:'center'">是否启用</th>
                <th data-options="field:'_operate',width:150,align:'center',formatter:formatOper">操作</th>
            </tr>
        </thead>
    </table>


    <div id="w" class="easyui-window" title="添加用户" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:600px;height:300px;padding:10px;">
        <form>
            <table>
                <tr hidden="hidden">
                    <td>员工编号</td>
                    <td>
                        <input id="Users_Id" class="easyui-textbox" type="text" name="name" data-options="required:true">
                    </td>
                </tr>
                <tr>
                    <td>员工姓名</td>
                    <td>
                        <input id="Users_Name" class="easyui-textbox" type="text" name="name" data-options="required:true">
                    </td>
                </tr>
                <tr>
                    <td>员工账号</td>
                    <td>
                        <input id="Users_Account" class="easyui-textbox" type="text" name="name">
                    </td>
                </tr>
                <tr>
                    <td>员工密码</td>
                    <td>
                        <input id="Users_Pwd" class="easyui-textbox" type="text" name="name" data-options="required:true">
                    </td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td>
                        <input id="Users_TEL" class="easyui-textbox" type="text" name="name">
                    </td>
                </tr>
                <tr>
                    <td>所属角色</td>
                    <td>
                        <select id="rol" name="dept" style="width:100%"></select>
                    </td>
                </tr>
                <tr>
                    <td>所属部门</td>
                    <td>
                        <select id="Dep" name="dept" style="width:100%"></select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="add()" id="tian">添加</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="upt()" id="xiu" hidden="hidden">修改</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">取消</a>
                    </td>
                </tr>
            </table>
        </form>

    </div>
</body>
</html>
<script>
    function add()
    {
        var Users_Name = $("#Users_Name").val();
        var Users_Account = $("#Users_Account").val();
        var Users_Pwd = $("#Users_Pwd").val();
        var Users_TEL = $("#Users_TEL").val();
        var Roles_id = $("#rol").combobox('getValue');
        var Department_Id = $("#Dep").combobox('getValue');

        $.ajax({
            url: "http://localhost:25744/api/User",
            type: "post",
            data: { Users_Name: Users_Name, Users_Account: Users_Account, Users_Pwd: Users_Pwd, Users_TEL: Users_TEL, Roles_id: Roles_id, Department_Id: Department_Id },
            success:function(obj)
            {
                if (obj > 0)
                {
                    alert('添加成功');
                    $('#w').window('close');
                    jiazai();
                }
                else
                {
                    alert("添加失败");
                }
            }
        })

    }
    function upt() {
        var Users_Id = $("#Users_Id").val();
        var Users_Name = $("#Users_Name").val();
        var Users_Account = $("#Users_Account").val();
        var Users_Pwd = $("#Users_Pwd").val();
        var Users_TEL = $("#Users_TEL").val();
        var Roles_id = $("#rol").combobox('getValue');
        var Department_Id = $("#Dep").combobox('getValue');
        $.ajax({
            url: "http://localhost:25744/api/User",
            type: "Put",
            data: {Users_Id:Users_Id, Users_Name: Users_Name, Users_Account: Users_Account, Users_Pwd: Users_Pwd, Users_TEL: Users_TEL, Roles_id: Roles_id, Department_Id: Department_Id },
            success: function (obj) {
                if (obj > 0) {
                    alert('修改成功');
                    $('#w').window('close');
                    jiazai();
                }
                else {
                    alert("修改失败");
                }
            }
        })

    }
</script>
